<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <meta name="viewport" content="width=device-width, initial-scale=0.5 minimum-scale=0.5, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>移动端上拉刷新————下拉加载</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
	<div class="guess-game-type">
		<div class="item">
			<div class="text sec allCenter font-color3">全部</div>
		</div>
		<div class="item">
			<div class="text allCenter font-color4">英雄联盟</div>
		</div>
		<div class="item">
			<div class="text allCenter font-color4">Dota2</div>
		</div>
		<div class="item">
			<div class="text allCenter font-color4">王者荣耀</div>
		</div>
	</div>
	<div style="padding-top:0.8rem;padding-bottom: 0.8rem;position: relative;" id="scroll_div">
		<div style="position: absolute;top:0.16rem;left:0;right:0;text-align: center;height:0.8rem;line-height: 0.8rem;">
            <div class="box" id="loading-animate" style="display: none;">
                <div class="loading-3">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </div>
            </div>
            <div id="loadingText">
                <span style="font-size:0.22rem;color:#9b9b9b;" id="scroller-pullDown">刷新中...</span>
            </div>
        </div>
		<div class="guess-list">
			<div class="list-time allCenter">2017-11-25</div>
			<div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg3">已结束</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="list-label">已参加</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
			</div>
		</div>
		<div class="guess-list">
			<div class="list-time allCenter">明日</div>
			<div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
				<div class="list-box space-between">
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
					<div class="center">
						<div class="center-box">
							<div class="title">王者荣耀KPL联赛</div>
							<div class="label bg4">可预测</div>
							<div class="allCenter">
								<div class="time-icon">
									<img src="image/time.jpg" alt="">
								</div>
								<div class="time-text">4小时43分钟后</div>
							</div>
						</div>
					</div>
					<div class="player">
						<div class="player-image">
							<img src="image/default-img1.png">
						</div>
						<div class="player-text">RNG</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script src='masque_pullDown.js'></script>
<script>
// rem的适配  1rem = 100px;
;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 10);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, window);
</script>
<script>
var option = {
	refStratFunction : function(){
		console.log("刷新中");
	}
}
var scr = new usePull(option);
</script>
</html>